<template>
  <div class="app">
    <ul>
      <li>
        <p>姓名:</p>
        <input type="text" v-model="txt1" />
      </li>
      <li>
        <p>年龄:</p>
        <input type="text" v-model="txt2" />
      </li>
      <li>
        <p>身高:</p>
        <input type="unmber" v-model="txt3" />(米)
      </li>
      <li>
        <p>体重:</p>
        <input type="number" v-model="txt4" />(公斤)
      </li>
      <li>
        <p>病史:</p>
        <input type="text" v-model="txt5" />
      </li>
      <li><button @click="add">诊断</button></li>
      <li v-show="result">
        <P>患者 {{ txt1 }} 的诊断结果: {{ txt6 }}</P>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      txt1: "",
      txt2: "",
      txt3: "",
      txt4: "",
      txt5: "",
      txt6: "",
      result: false,
    };
  },
  methods: {
    add() {
      if (
        this.txt1 == "" ||
        this.txt2 == "" ||
        this.txt3 == "" ||
        this.txt4 == ""
      ) {
        alert("请输入完整信息");
        return;
      }
      this.result = true;
      let age = this.txt4 / (this.txt3 ^ 2);
      console.log(age);

      if (age > 29.9) {
        this.txt6 = "体重肥胖 ";
        return;
      }
      if (age <= 29.9) {
        this.txt6 = "体重过重";
        return;
      }
      if (age <= 24.9) {
        this.txt6 = "体重正常";
        return;
      }
      if (age <= 18.5) {
        this.txt6 = "体重过轻";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.app {
  width: 400px;
  height: 700px;
  border: 1px color(#000) solid;
}
.app ul li {
  display: flex;
  height: 40px;
  align-items: center;
  justify-items: center;
  padding-top: 10px;
}
.app ul li p {
  font-size: 20px;
  padding-right: 20px;
}
</style>
